<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？</title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				padding: 10px;
				margin: 10px;
				border: 10px solid #31B6E7;
				background-color: #ff0000;
			}
			
			.border{
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
			}
			
			.content{
				box-sizing: content-box;
			}
		</style>
	</head>
	<body>
<pre>
（1）有两种盒子模型：IE盒模型（border-box）、W3C标准盒模型（content-box）
（2）盒模型：分为内容（content）、填充（padding）、边界（margin）、边框（border）四个部分

IE盒模型和W3C标准盒模型的区别：

（1）W3C标准盒模型：属性width，height只包含内容content，不包含border和padding
（2）IE盒模型：属性width，height包含content、border和padding，指的是content+padding+border。

在ie8+浏览器中使用哪个盒模型可以由box-sizing（CSS新增的属性）控制，默认值为content-box，即标准盒模型；
如果将box-sizing设为border-box则用的是IE盒模型。如果在ie6，7，8中DOCTYPE缺失会将盒子模型解释为IE
盒子模型。若在页面中声明了DOCTYPE类型，所有的浏览器都会把盒模型解释为W3C盒模型。


盒模型都是由四个部分组成的，分别是margin、border、padding和content。

标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同。标准盒模型的width和height属性的
范围只包含了content，而IE盒模型的width和height属性的范围包含了border、padding和content。

一般来说，我们可以通过修改元素的box-sizing属性来改变元素的盒模型。
</pre>
		
		<div class="border">怪异盒子模型</div>
		
		
		<div class="content">标准盒子模型</div>
		
	</body>
</html>
